<template>
  <div class="home">
    <Screen theme="#11c582">
      <template #content>
        <canvas canvas-id="canvasId" id="earth-canvas"></canvas>
      </template>
    </Screen>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import Screen from "@/components/Screen"; // @ is an alias to /src
import { World } from "./three";
import { nextTick } from "vue";
function init() {
  const canvas = document.getElementById("earth-canvas") as HTMLCanvasElement;
  const world = new World(canvas);
  world.start();
}
onMounted(() => {
  nextTick(() => {
    init();
  });
});
</script>

<style scoped lang="scss">
#earth-canvas {
  width: 100%;
  height: 100%;
  z-index: 999;
}
.label {
  color: white;
  font-family: sans-serif;
  font-size: 5px;
  transform: scale(0.3);
  padding: 4px;
  // 鼠标显示手
  cursor: pointer;
  background: rgba(0, 0, 0, 1);
  border-radius: 4px;
}
</style>
